<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	
	<title>Vue 组件注册 Prop </title>
</head>
<body>
	<div id="app1">
	
		<blog-post postTitle="Blogging with Vue"></blog-post>
		<blog-post post-title="Why Vue is so fun"></blog-post>
		<br>
		<info-post test-title="test-title"></info-post>
		<!-- <info-post testTitle="testTitle"></info-post> -->
		
	</div>
	
</body>
</html>
<script type="text/javascript">
	Vue.component('blog-post', {
	  props: ['postTitle'],
	  template: '<h3>{{ postTitle }}</h3>'
	})
	
	Vue.component('info-post', {
		props: ['test-title'],
	  template: '<h3>{{ test-title }}</h3>'
	})
// 注意大小写
	var app1=new Vue({
		el:'#app1'
	})
</script>